<template>
  <div class="tscxbox">
    <echartCompt class="tscxbox-chart" v-model="chartOption" />
  </div>
</template>


<script>
import titleCompt from "@/views/金四决策指挥平台/components/titleCompt";
export default {
  components: {
    titleCompt,
  },
  props: {},
  data() {
    return {
      rowData: [], // 图表的数据
cyData: {
        indicator: [
          { text: "第一产业\n20 %", max: 50 },
          { text: "第二产业\n30 %", max: 50 },
          { text: "第三产业\n50 %", max: 50 },
        ],
        kpjeData: ["20", "30", "50"],
        dataArr: [
          {
            value: ["20", "30", "50"],
            name: "数量",
            itemStyle: {
              normal: {
                lineStyle: { color: "#4A99FF" },
                shadowColor: "#4A99FF",
                shadowBlur: 10,
              },
            },
            areaStyle: {
              normal: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    { offset: 0, color: "#44ff86" },
                    { offset: 1, color: "#0060ff" },
                  ],
                  globalCoord: false,
                },
                opacity: 0.6,
              },
            },
          },
        ],
      },
    };
  },
  watch: {
    condData() {
      // 监听当条件发生切换时，执行数据查询
      this.init();
    },
  },
  mounted() {
    this.init();
  },
  computed: {
    chartOption(){
      let opt = {
        title: {
          show: false,
          text: "分产业",
          textStyle: {
            align: "center",
            color: "rgb(50,198,255)",
            fontSize: this.getSize(16),
            fontWeight: "normal",
          },
          top: "15%",
          left: "center",
        },
        color: ["#4A99FF"],
        tooltip: {
          show: false,
          formatter: function () {
            var tip = "";
            var name = ["第一产业", "第二产业", "第三产业"];
            for (var i = 0; i < _this.cyData.indicator.length; i++) {
              tip +=
                name[i] + " : " + _this.cyData.kpjeData[i] + " 万元" + "</br>";
            }
            return tip;
          },
        },
        radar: {
          // shape: 'circle',
          center: ["50%", "65%"],
          radius: "95%",
          name: {
            //每个指示器名称的配置项。
            textStyle: {
              color: "#ffffff",
              fontSize: 22,
              //align:'right'
            },
            padding: [0, 0, 0, 0],
          },
          splitNumber: 7, //指示器轴的分割段数。
          // shape: 'circle',//雷达图绘制类型，支持 'polygon' 和 'circle'
          axisLine: {
            //指向外圈文本的分隔线样式(坐标轴轴线相关设置)
            show: false, //不显示坐标轴轴线
          },
          splitLine: {
            //坐标轴在 grid 区域中的分隔线。
            lineStyle: {
              color: "#2F5784", // 分隔线颜色
              width: this.getSize(2), // 分隔线线宽
            },
          },
          splitArea: {
            show: false, //是否显示分隔区域
            //areaStyle: { // 分隔区域的样式设置。
            //    color: ['green', 'red'], // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
            //}
          },
          indicator: this.cyData.indicator,
          nameGap: 6,
        },
        series: [
          {
            type: "radar",
            tooltip: {
              trigger: "item",
            },
            //symbolSize: 8,//内部图形上标记的大小
            symbolSize: this.getSize(4), //各个角的圆点大小
            //symbol: 'none',//如果不写这句，内部图形上会有圆点标记
            lineStyle: {
              width: 2,
            },
            areaStyle: {
              // 区域填充样式，areaStyle也可以放在data:[]里面
              normal: {
                // color: '#0197C7',
                opacity: 0.7,
                color: {
                  // 填充的颜色，线性渐变
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#02ABD7", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#016BA1", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
            animation: true, //是否开启动画。
            animationEasingUpdate: "bounceOut", //数据更新动画的缓动效果。
            animationDurationUpdate: 2000, //数据更新动画的时长。
            data: this.cyData.dataArr,
          },
        ],
      };
      return opt;
    },
  
    condData() {},
    sql() {
      let sql = ``;
      return sql;
    },
  },

  methods: {
    init() {
      this.getData();
    },

    getData() {
      // 查询图表数据
      // this.ajax({
      //   sql: this.sql,
      //   sqlTip: "产业结构税收分析",
      // }).then((res) => {
      //   this.rowData = res;
      //   // console.log(JSON.stringify(res));
      // });
    },
  },
};
</script>

<style lang="scss" scoped>
.tscxbox {
  height: 100%;
  text-align: left;
  &-chart {
    height: calc(100%);
  }
}
</style>
